<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>部门管理系统</title>
  <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
  <style>
	.chaxunbiaodan{
		font-size: 20px;
		color: #000000;
	}

  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin" >
  <div class="layui-header" style="background-color: #278eff;">
    <div class="layui-logo layui-hide-xs layui-bg-blue" >
		<img src="../images/logo.png" width="100px" height="20px">
	</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

      <li class="layui-nav-item layui-hide-xs"><a href="">Web UI设计方案1.0</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">首页</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">页面模板</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">功能示例</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">UI组件</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">拓扑图</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">3D组件</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">ECharts图表</a></li>
	  <li class="layui-nav-item layui-hide-xs"><a href="">最佳实践</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
		<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
		  <a href="javascript:;">
			<i class="layui-icon layui-icon-search"></i>
		  </a>
		</li>
		<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
		  <a href="javascript:;">
			<i class="layui-icon layui-icon-set-fill"></i>
		  </a>
		</li>
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
		<i class="layui-icon layui-icon-username"></i>
		超级Admin
        </a>
      </li>
	  <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
	    <a href="javascript:;">
	  	<i class="layui-icon layui-icon-down"></i>
	    </a>
	  </li>

    </ul>
  </div>

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="test">
		<li class="layui-nav-item">
		<a class="" href="javascript:;">网站导航
		  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  <i class="layui-icon layui-icon-shrink-right"></i>
		</a>
		</li>
        <li class="layui-nav-item"><a href="javascript:;">首页</a></li>
		<li class="layui-nav-item">
		  <a href="javascript:;">页面模板</a>
			  <dl class="layui-nav-child">
				<dd><a href="javascript:;">&nbsp;&nbsp;页面模板1</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;页面模板2</a></dd>
			  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="javascript:;">首页</a>
			  <dl class="layui-nav-child">
				<dd><a href="javascript:;">&nbsp;&nbsp;首页1</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;首页2</a></dd>
			  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="javascript:;">常用页面</a>
			  <dl class="layui-nav-child">
				<dd><a href="javascript:;">&nbsp;&nbsp;基本表单</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;查询表单</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;详情页面01</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;&nbsp;&nbsp;详情页面02</a></dd>
			  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="javascript:;">功能示例</a>
			  <dl class="layui-nav-child">
				<dd><a href="javascript:;">&nbsp;&nbsp;功能示例1</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;功能示例2</a></dd>
			  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="javascript:;">UI组件</a>
			  <dl class="layui-nav-child">
				<dd><a href="javascript:;">&nbsp;&nbsp;UI组件1</a></dd>
				<dd><a href="javascript:;">&nbsp;&nbsp;UI组件2</a></dd>
			  </dl>
		</li>
        <li class="layui-nav-item">
          <a href="javascript:;">拓扑图</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">3D组件</a>
        </li>
		<li class="layui-nav-item">
		  <a href="javascript:;">ECharts图表</a>
		  <dl class="layui-nav-child">
			  <dd><a href="javascript:;">&nbsp;&nbsp;ECharts图表1</a></dd>
			  <dd><a href="javascript:;">&nbsp;&nbsp;ECharts图表2</a></dd>
		  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="javascript:;">最佳实践</a>
		  <dl class="layui-nav-child">
			<dd><a href="javascript:;">&nbsp;&nbsp;最佳实践1</a></dd>
			<dd><a href="javascript:;">&nbsp;&nbsp;最佳实践2</a></dd>
			</dl>
		</li>

      </ul>
    </div>
  </div>

  <div class="layui-body">
    <div class="layui-fluid" >
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">首页</li>
          <li>查询表单</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            这是首页
          </div>
          <div class="layui-tab-item">
			  <fieldset class="layui-elem-field"><!-- 最外面那层框 -->
			    <div class="layui-field-box"><!-- 自适应大小 -->
				<div class="layui-row"><!-- 第一层查询表单 -->
				<p class="chaxunbiaodan">查询表单内容</p>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				</fieldset>
				</div>
				<div class="layui-row"><!-- 第二层选择表单 -->
				<div class="layui-form">
				  <div class="layui-form-item">
					<div class="layui-inline">
					  <label class="layui-form-label">请选择日期</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test11" placeholder="yyyy年MM月dd日">
					  </div>
					</div>
					<div class="layui-inline">
					  <label class="layui-form-label">请选择日期</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test12" placeholder="dd/MM/yyyy">
					  </div>
					</div>
					<div class="layui-inline">
					  <label class="layui-form-label">请选择月份</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test13" placeholder="yyyyMMdd">
					  </div>
					</div>
					<div class="layui-inline">
					  <label class="layui-form-label">请选择时间</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test14" placeholder="H点m分">
					  </div>
					</div>
					<div class="layui-inline">
					  <label class="layui-form-label">请选择范围</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test15" placeholder=" ~ ">
					  </div>
					</div>
					<div class="layui-inline">
					  <label class="layui-form-label">请选择范围</label>
					  <div class="layui-input-inline">
						<input type="text" class="layui-input" id="test16" placeholder="开始 到 结束">
					  </div>
					</div>
				  </div>
				</div>
				</div>
					<div class="layui-row"><!-- 第三层搜索表单 -->
						<div class="layui-col-md4 layui-col-md-offset10">
							 <div class="layui-inline" id="sousuo" style="margin-right: auto;">
									 <button class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
										 <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
										 搜索
									 </button>
							 </div>
						 </div>
					 </div>
					 <div class="layui-row"><!-- 第四层横线 -->
						 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						 </fieldset>
					 </div>
					 <div class="layui-row"><!-- 第五层横线 ，放表格-->

						 <div class="layui-form">

							 <table id="demo" lay-filter="test"></table>


						   <!--<table class="layui-table">-->
						     <!--<colgroup>-->
						       <!--<col width="150">-->
						       <!--<col width="150">-->
						       <!--<col width="200">-->
						       <!--<col>-->
						     <!--</colgroup>-->
						     <!--<thead>-->
						       <!--<tr>-->
						         <!--<th>人物</th>-->
						         <!--<th>性别</th>-->
						         <!--<th>出身日期</th>-->
						         <!--<th>所属部门</th>-->
						       <!--</tr> -->
						     <!--</thead>-->
						     <!--<tbody>-->
						       <!--<tr>-->
						         <!--<td>罗庭辉</td>-->
						         <!--<td>男</td>-->
						         <!--<td>2002-10-14</td>-->
						         <!--<td>后端开发部</td>-->
						       <!--</tr>-->
						       <!--<tr>-->
						         <!--<td>蒋馨逸</td>-->
						         <!--<td>女</td>-->
						         <!--<td>2001-09-30</td>-->
						         <!--<td>前端开发部</td>-->
						       <!--</tr>-->
						       <!--<tr>-->
						         <!--<td>杨志鹏</td>-->
						         <!--<td>男</td>-->
						         <!--<td>2000-06-27</td>-->
						         <!--<td>前端开发部</td>-->
						       <!--</tr>-->
						       <!--<tr>-->
						         <!--<td>鲁婷婷</td>-->
						         <!--<td>女</td>-->
						         <!--<td>2001-08-21</td>-->
						         <!--<td>后端开发部</td>-->
						       <!--</tr>-->
						       <!--<tr>-->
						         <!--<td>王达鸿</td>-->
						         <!--<td>男</td>-->
						         <!--<td>2001-02-13</td>-->
						         <!--<td>前端开发部</td>-->
						       <!--</tr>-->
						     <!--</tbody>-->
						   <!--</table>-->
						 </div>
					 </div>
				 </div>

			</fieldset>
		  <div>

		  </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script src="../static/lib/layui/layui.js"></script>
<script>
	layui.use('table', function(){
		var table = layui.table;

		//第一个实例
		table.render({
			elem: '#demo'
			,height: 312
			,url: 'table/get_table' //数据接口
			,page: true //开启分页
			,cols: [[ //表头
				{field: 'rid', title: 'ID', width:120, sort: true, fixed: 'left'}
				,{field: 'rname', title: '用户名', width:120}
				,{field: 'rintroduction', title: '介绍', width:120, sort: true}

			]]
		});

	});
</script>
	<script>
	//JS
	layui.use(['element', 'layer', 'util'], function(){
	  var element = layui.element
	  ,layer = layui.layer
	  ,util = layui.util
	  ,$ = layui.$;

	  //头部事件
	  util.event('lay-header-event', {
		//左侧菜单事件
		menuLeft: function(test){
		  layer.msg('展开左侧菜单的操作', {icon: 0});
		}
		,menuRight: function(){
		  layer.open({
			type: 1
			,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
			,area: ['260px', '100%']
			,offset: 'rt' //右上角
			,anim: 5
			,shadeClose: true
		  });
		}
	  });

	});
</script>
</div></body>
</html>